import clonedeep from 'lodash.clonedeep';
import { GetlistData } from '@/apis/management/personnel/baseSetting/TransactionSetting';
import { GetWorkPlaceList } from '@/apis/management/organization/organizationManagement';
interface formType {
  id?: number;
  did?: number;
  edit: boolean;
  node: string;
  department: string;
  person: string;
  handlerAddr: string;
  demands: {
    content: string;
    demand: string;
  }[];
}
export default defineComponent({
  emits: ['update:visible', 'updateFromData', 'updateFromDataOne'],
  props: ['visible', 'fromData'],

  setup(props, { emit }) {
    // console.log(props);
    watch(
      () => props.fromData,
      () => {
        for (const key in props.fromData) {
          form[key as keyof formType] = clonedeep(props.fromData[key]) as never;
        }
      }
    );
    const form = reactive<formType>({
      edit: false,
      node: '',
      department: '',
      person: '',
      handlerAddr: '',
      demands: [{ content: '', demand: '' }]
    });
    const columns = [
      {
        title: '办理事项',
        dataIndex: 'content',
        slotName: 'content'
      },
      {
        title: '办理事项要求',
        dataIndex: 'demand',
        slotName: 'demand'
      },
      {
        title: '操作',
        slotName: 'operation'
      }
    ];
    const departmentSelectData: any = reactive({ data: [] }); // 部门
    const agentSelectData: any = reactive({
      data: [
        { id: 1, name: '撒旦发射点' },
        { id: 2, name: '法撒旦' }
      ]
    }); // 办理人
    const locationSelectData: any = reactive({ data: [] }); // 地点

    const init = async () => {
      const { content } = (await GetWorkPlaceList({
        pageNumber: 0,
        pageSize: -1
      })) as any;
      locationSelectData.data = content;
      const Getlist = await GetlistData({
        type: 2
      });
      const ids: number[] = [];
      Getlist.forEach((ele: any) => {
        ele.controlData.forEach((item: any) => {
          item.code === 'C3D33FA57216F4968BDE51C31D623FC09' &&
          item.value === '2'
            ? ids.push(ele.id)
            : null;
        });
      });
      Getlist.forEach((ele: any) => {
        if (ids.indexOf(ele.id) !== -1) {
          ele.controlData.forEach((item: any) => {
            item.code === 'C30BBF36A5AF541F7A2657671DEE2EDD6'
              ? departmentSelectData.data.push(item)
              : null;
          });
        }
      });
    };
    init();
    const departmentSelect = ref(false);
    const personSelect = ref(false);
    const spaceSelect = ref(false);
    const handleOk = async () => {
      if (form?.edit) {
        emit('updateFromDataOne', clonedeep(form));
      } else {
        emit('updateFromData', clonedeep(form));
      }
      emit('update:visible', false);
      form.node = '';
      form.department = '';
      form.person = '';
      form.handlerAddr = '';
      form.demands = [{ content: '', demand: '' }];
      form.edit = false;
      departmentSelect.value = false;
      personSelect.value = false;
      spaceSelect.value = false;
    };
    const handleCancel = () => {
      emit('update:visible', false);
      form.node = '';
      form.department = '';
      form.person = '';
      form.handlerAddr = '';
      form.demands = [{ content: '', demand: '' }];
      form.edit = false;
      departmentSelect.value = false;
      personSelect.value = false;
      spaceSelect.value = false;
    };
    const del = (index: number) => {
      form.demands.splice(index, 1);
    };
    const add = () => {
      form.demands.push({ content: '', demand: '' });
    };

    return () => (
      <>
        <a-drawer
          width={700}
          visible={props.visible}
          onOk={handleOk}
          onCancel={handleCancel}
          unmountOnClose
          v-slots={{
            title: title,
            default: () => (
              <a-form model={form}>
                <a-form-item label="办理环节：">
                  <a-input v-model={form.node} placeholder="请输入" />
                </a-form-item>
                <a-form-item>
                  <div>
                    <a-table
                      width={600}
                      columns={columns}
                      data={form.demands}
                      stripe={true}
                      pagination={false}
                      v-slots={{
                        content: (props: any) => (
                          <a-input
                            v-model={form.demands[props.rowIndex].content}
                          />
                        ),
                        demand: (props: any) => (
                          <a-input
                            v-model={form.demands[props.rowIndex].demand}
                          />
                        ),
                        operation: (props: any) => (
                          <a-button onClick={() => del(props.rowIndex)}>
                            删除
                          </a-button>
                        )
                      }}
                    ></a-table>
                    <a-botton onClick={add}>新增</a-botton>
                  </div>
                </a-form-item>
                <a-form-item label="办理部门：">
                  <div style="display:flex;flex-direction: column;width:100%">
                    <a-switch
                      v-model={departmentSelect.value}
                      style="width: fit-content;margin-bottom: 20px;"
                    />
                    <a-select
                      field-names={{ value: 'id', label: 'value' }}
                      options={departmentSelectData.data}
                      v-model={form.department}
                      disabled={!departmentSelect.value}
                      placeholder="请选择"
                    />
                  </div>
                </a-form-item>
                <a-form-item label="办理人：">
                  <div style="display:flex;flex-direction: column;width:100%">
                    <a-switch
                      v-model={personSelect.value}
                      style="width: fit-content;margin-bottom: 20px;"
                    />
                    <a-select
                      v-model={form.person}
                      disabled={!personSelect.value}
                      field-names={{ value: 'id', label: 'name' }}
                      options={agentSelectData.data}
                      placeholder="请选择"
                    />
                  </div>
                </a-form-item>
                <a-form-item label="办理人电话：">
                  <a-input
                    disabled
                    placeholder="系统自动读取办理人电话"
                    v-model={form.userMobile}
                  />
                </a-form-item>
                <a-form-item label="办理地点：">
                  <div style="display:flex;flex-direction: column;width:100%">
                    <a-switch
                      v-model={spaceSelect.value}
                      style="width: fit-content;margin-bottom: 20px;"
                    />
                    <a-select
                      field-names={{ value: 'id', label: 'name' }}
                      options={locationSelectData.data}
                      v-model={form.handlerAddr}
                      disabled={!spaceSelect.value}
                      placeholder="请选择"
                    />
                  </div>
                </a-form-item>
              </a-form>
            )
          }}
        ></a-drawer>
      </>
    );
  }
});

function title() {
  return '编辑事项';
}
